<!doctype html>
<html lang="zh-Hans">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="hugo-theme" content="Axiom 0.7.1">



  <link rel="icon" type="image/png" sizes="32x32" href="/blog/">
  <link rel="icon" type="image/x-icon" href="/blog/">
  <link rel="apple-touch-icon" href="/blog/">
  <link rel="canonical" href="https://Mia-zhao.gitee.io/blog/posts/">
  <link rel="alternate" type="application/rss+xml" href="https://Mia-zhao.gitee.io/blog/posts/index.xml" hreflang="zh-Hans">
<link rel="preload" as="style" href="/blog/bundle.css?v=1603792187" media="all">
<link rel="stylesheet" href="/blog/bundle.css?v=1603792187" media="all">
<style>.cdata pre{color:#edf2f7;background-color:#2d3748}.cdata :not(pre)>code{color:#805ad5;background-color:#f7fafc}.chroma .err{color:#fed7d7;background-color:#9b2c2c}.chroma .hl{background-color:#4a5568}.chroma .ln{color:#a0aec0}.chroma .k,.chroma .kc,.chroma .kd,.chroma .kn,.chroma .kp,.chroma .kr{color:#63b3ed}.chroma .kt{color:#b794f4}.chroma .na{color:#f6e05e}.chroma .nb{color:#f6ad55}.chroma .nc{color:#fc8181}.chroma .no{color:#68d391}.chroma .nd{color:#fc8181}.chroma .ne{color:#fc8181}.chroma .nf{color:#f6ad55}.chroma .nt{color:#fc8181}.chroma .l{color:#b794f4}.chroma .dl,.chroma .ld,.chroma .s,.chroma .s2,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .sd{color:#68d391}.chroma .se{color:#a0aec0}.chroma .s1,.chroma .sh,.chroma .si,.chroma .sr,.chroma .ss,.chroma .sx{color:#68d391}.chroma .il,.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo{color:#b794f4}.chroma .o,.chroma .ow{color:#90cdf4}.chroma .p{color:#cbd5e0}.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm,.chroma .cp,.chroma .cpf,.chroma .cs{color:#a0aec0}.chroma .ge{font-style:italic}.chroma .gs{font-weight:700}</style>



<title>Posts : Mia&#39;s Blog Posts</title>

<meta property="og:title" content="Posts">
<meta property="og:site_name" content="Mia&#39;s Blog Posts">
<meta property="og:url" content="https://Mia-zhao.gitee.io/blog/posts/">
<link rel="image_src" href="https://Mia-zhao.gitee.io/blog/">
<meta property="og:image" content="https://Mia-zhao.gitee.io/blog/">
<meta property="og:image:width" content="">
<meta property="og:image:height" content="">
<meta property="og:type" content="website">
<meta property="og:locale" content="zh_Hans">
<meta property="og:description" content="">
<meta name="description" content="">
<meta property="og:updated_time" content="2020-10-26T08:00:00Z">
<meta property="fb:app_id" content="">
<meta name="author" content="Mia Zhao">
<meta property="article:author" content="https://mia-zhao.gitee.io/">
<meta property="article:published_time" content="2020-10-26T08:00:00Z">
<meta property="article:modified_time" content="2020-10-26T08:00:00Z">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Posts",
  "alternativeHeadline": "List of content in the Posts section.",
  "url": "https://Mia-zhao.gitee.io/blog/posts/",
  "image": "https://Mia-zhao.gitee.io/blog/",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://Mia-zhao.gitee.io/blog/posts/"
  },
  "description": "",
  "author": {
    "@type": "Person",
    "name": "Mia Zhao"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mia's Blog Posts",
    "logo": {
      "@type": "ImageObject",
      "url": "https://Mia-zhao.gitee.io/blog/"
    }
  },
  "datePublished": "2020-10-26T08:00:00Z",
  "dateModified": "2020-10-26T08:00:00Z",
  "articleBody": ""
}
</script>

<link rel="preload" as="script" href="/blog/bundle.js?v=1603792187">


</head>
<body>

  <header id="nav" class="header">
  <div class="ax-l-i max-w-6xl">
    <div class="ax-logo">
      <a class="block" href="/blog/" title="Mia&#39;s Blog Posts"><span class="font-semibold text-raven-900">Mia's Blog Posts</span></a>
    </div>
    <div class="ax-user">
      <a class="p-2 w-8 h-8 block text-raven-500 hover:text-gray-800 focus:text-gray-800 focus:outline-none" target="_blank" rel="noopener nofollow" href="https://www.google.com/search?q=site:https://Mia-zhao.gitee.io/blog/" title="Search">
        <svg class="fill-current" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M2.67 12.804c0-5.6 4.544-10.134 10.133-10.134s10.134 4.544 10.134 10.134-4.544 10.133-10.134 10.133S2.67 18.393 2.67 12.804zm28.943 16.923l-8.868-8.868c4.287-5.3 3.68-13.012-1.378-17.57S8.564-1.066 3.75 3.75s-5.017 12.558-.46 17.618 12.28 5.665 17.57 1.378l8.868 8.868a1.33 1.33 0 0 0 2.231-.597c.123-.46-.008-.952-.345-1.29h0z"/></svg>

      </a>
      <a class="p-2 block text-base leading-none text-raven-500 hover:text-gray-800 focus:text-gray-800 focus:outline-none" href="/blog/posts/">
        Posts
      </a>
    </div>
  </div>

  
</header>

  <main>
<div class="default-section section-posts">
  <div class="ax-content ax-l-o">
    <div class="ax-l-i max-w-680">
      <h1 class="section-title font-content-sans font-semibold uppercase tracking-wide text-2xl text-raven-800">Posts</h1>
      <div class="mt-8">
        <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/implement-an-event-emitter/">Implement an Event Emitter</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/implement-an-event-emitter/">I was asked to implement an event emitter class in one of the front-end job interviews. A few APIs were given in the interview question and an emitter class should fulfill...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-10-26T08:00:00Z">Oct 26, 2020 4:00PM</time></aside>
  </div>
</div>

      </div>
      <div class="mt-8">
        <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/vue-%E4%B9%8B-%E4%BF%AE%E9%A5%B0%E7%AC%A6/">Vue 之 修饰符</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/vue-%E4%B9%8B-%E4%BF%AE%E9%A5%B0%E7%AC%A6/">事件修饰符 在事件处理中使用event.preventDefault()或者event.stopPropagation()的情况很常见，为了剥离数据逻辑以及 DOM 事件处理，Vue 提供 .stop .prevent .capture .self .once .passive 修饰符给v-on指令。修饰符可以链式使用，例如: &lt;a...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-10-11T06:00:00Z">Oct 11, 2020 2:00PM</time></aside>
  </div>
</div>

      </div>
      <div class="mt-8">
        <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/vue.js-vs-vue.runtime.js/">vue.js vs vue.runtime.js</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/vue.js-vs-vue.runtime.js/">根据 Vue 官方文档，Vue 提供不同构建版本，包括：完整版 (vue.js)，运行时版 (vue.runtime.js)。完整版以及运行时版还有他们的生产环境版 vue.min.js 以及 vue.runtime.min.js。 区别 完整版包含编译器和运行时版本。编译器的作用是将模板字符串编译称为 JavaScript 渲染函数的代码。 例...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-10-09T06:40:00Z">Oct 9, 2020 2:40PM</time></aside>
  </div>
</div>

      </div>
      <div class="mt-8">
        <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/vue-3-%E4%B9%8B-i18n/">Vue 3 之 i18n</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/vue-3-%E4%B9%8B-i18n/">vue-i18n为 Vue 提供 i18n (internationalization) 插件支持，在 Vue 3 中使用 vue-i18n 对比 Vue 2 稍有不同。 安装 需要安装支持 Vue 3 的插件版本npm install vue-i18n@next或者yarn add vue-i18n@next。 使用 ...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-10-07T04:20:00Z">Oct 7, 2020 12:20PM</time></aside>
  </div>
</div>

      </div>
      <div class="mt-8">
        <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/%E8%99%9A%E6%8B%9F-dom-%E5%92%8C-dom-diff/">虚拟 DOM 和 DOM Diff</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/%E8%99%9A%E6%8B%9F-dom-%E5%92%8C-dom-diff/">在 React 和 Vue 中，对于每一个 DOM 对象，有一个对应的虚拟 DOM (virtual DOM) 对象。React 和 Vue 对虚拟 DOM 对象的呈现语法不同，但代表的内容是一样的。 开发者在 Vue 中使用 x-template，在 React 中使用 jsx，当渲染他们时，每一个虚拟 DOM 更新，React 和 Vue 则对...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-09-16T09:00:00Z">Sep 16, 2020 5:00PM</time></aside>
  </div>
</div>

      </div>
      <div class="mt-8">
        <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/react-%E4%B9%8B-mabox-gl/">React 之 Mapbox GL</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/react-%E4%B9%8B-mabox-gl/">Mapbox GL JS 是一个用来生成地图的 JavaScript 库。要在项目里使用需要有 access token 和 mapbox style，token 需要在 mapbox 账号里创建，mapbox style 可以从gallery里添加。在 React 项目里可以用react-map-gl库来创建和操作地图。 Map Map 对象代表...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-09-14T11:00:00Z">Sep 14, 2020 7:00PM</time></aside>
  </div>
</div>

      </div>
      <div class="mt-8">
        <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/react-%E4%B9%8B-styled-components/">React 之 Styled Components</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/react-%E4%B9%8B-styled-components/">在 Vue 的组件中，CSS/SASS 可以有scoped修饰并且样式与 HTML 处于同一文件中，这样对于组件的抽离及样式分析都较为清晰明了。React 的模板生成tsx/jsx以及独立的css，虽然可以通过文件名以及文件结构区分不同模块的样式，然而大量样式代码以及类命名的存在使组件的结构不那么直观。 styled components 能够解决...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-09-13T12:30:00Z">Sep 13, 2020 8:30PM</time></aside>
  </div>
</div>

      </div>
      <div class="mt-8">
        <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/react-%E4%B9%8B-drag-vs-click/">React 之 Drag vs Click</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/react-%E4%B9%8B-drag-vs-click/">在写 React Mapbox GL 的旅行地图项目的时候遇到了关于 Drag 和 Click 事件难以区分的问题。在触屏上 Drag 和 Click 区分没有问题，然而在鼠标点击的 Drag 和 Click 事件上有些细节需要注意。 对于一个可以拖动的元素，可以监听的拖动事件有drag、dragStart、dragEnd，拖动结束时也会触...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-09-12T13:42:00Z">Sep 12, 2020 9:42PM</time></aside>
  </div>
</div>

      </div>
      <div class="mt-8">
        <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/react-%E4%B9%8B-css/">React 之 CSS</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/react-%E4%B9%8B-css/">Create React APP 中有一个添加 CSS Normalize 的语句，目的是让不同浏览器的样式更统一: /* 在index.css中加入: */@import-normalize;与 Vue 不同的是，React 框架不自带 sass，要使用 sass 需要安装node-sass。Github 上有不少关于node-sass...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-09-12T10:22:00Z">Sep 12, 2020 6:22PM</time></aside>
  </div>
</div>

      </div>
      <div class="mt-8">
        <div class="summary sm:flex">
  <div class="summary-content font-content-sans">
    <a class="summary-title block font-semibold leading-tightly tracking-tightly text-2xl text-raven-800 hover:text-raven-900" href="/blog/vue-%E4%B9%8B%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4/">Vue 之自定义指令</a>
    <a class="summary-excerpt mt-2 block font-normal leading-tight tracking-normal text-base text-raven-500 hover:text-raven-600" href="/blog/vue-%E4%B9%8B%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4/">Vue 框架提供数据绑定给接受输入的标签（如: input, select 等等）。以 input 为例，v-model指令可以双向绑定数据且自动更新。 &lt;input v-model=&quot;message&quot; placeholder=&quot;edit me&quot;&gt;&lt;p&gt;Message is: {{...</a>
    <aside class="summary-meta mt-6 font-normal leading-snug tracking-normal text-sm text-raven-500"><time datetime="2020-09-10T12:40:00Z">Sep 10, 2020 8:40PM</time></aside>
  </div>
</div>

      </div><div class="pagination flex justify-center text-sm mt-8">
    <a class="block m-1 px-2 py-1 text-blue-600 hover:text-blue-800" href="/blog/posts/" aria-label="First"><span aria-hidden="true">&laquo;&laquo;</span></a>
    <a class="block m-1 px-2 py-1 text-gray-500 font-semibold cursor-not-allowed"  aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
      <a class="block m-1 px-2 py-1  text-gray-500 font-semibold cursor-not-allowed" href="/blog/posts/">1</a>
      <a class="block m-1 px-2 py-1  text-blue-600 hover:text-blue-800" href="/blog/posts/page/2/">2</a>
      <a class="block m-1 px-2 py-1  text-blue-600 hover:text-blue-800" href="/blog/posts/page/3/">3</a>

  <a class="block m-1 px-2 py-1 text-blue-600 hover:text-blue-800" href="/blog/posts/page/2/" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
  <a class="block m-1 px-2 py-1 text-blue-600 hover:text-blue-800" href="/blog/posts/page/3/" aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</span></a>
</div>


    </div>
  </div>
</div>

  </main>
  <footer class="footer">
  <div class="ax-l-i max-w-6xl">
    <nav class="flex items-center justify-center">
      <a class="ml-3 first:ml-0 text-sm text-gray-600 hover:text-gray-800" href="/blog/posts/">Posts</a>
      <a class="ml-3 first:ml-0 text-sm text-gray-600 hover:text-gray-800" href="/blog/contact/">Contact</a>
    </nav>

    <div class="footer-copyright text-sm text-center text-gray-500 mt-4">
      &#169; -2020 Mia&#39;s Blog Posts
    </div>
    <div class="text-sm sm:text-xs text-center text-gray-500 mt-2">
      Powered by <a href="https://www.axiomtheme.com/?utm_source=theme-footer&utm_medium=website&utm_campaign=referral">Axiom</a>
    </div>
  </div>
</footer>

<script src="/blog/bundle.js?v=1603792187"></script>


</body>
</html>
